import React from 'react'
import {Link} from 'react-router'
import Action from '../../../action/action'
import Store from '../../../store/store'
import ReactMixin from 'react-mixin'
import Reflux from 'reflux'

import SideNavBar from  '../../../component/sideNavBar/sideNavBar'

export default class MyCash extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            userWallet : {},
            showBankCardList : false,
            checkCashBtn : false,
        }
    }
    componentDidMount(){
        Action.getUserWallet(()=>{})
    }
    //显示银行卡列表
    showBankCardList(){
        this.setState({
            showBankCardList:!this.state.showBankCardList
        })
    }
    //选择银行卡
    checkBankCard(i){
        Action.setUserWallet(i);
        this.showBankCardList()
    }
    //判断提现按钮状态
    checkCashBtn(){
        let cashNum = this.refs.cashNum.value*1,
            walletChange = this.state.userWallet && this.state.userWallet.change*1;
          cashNum <= walletChange ?
            this.setState({
                checkCashBtn : true
            }) : this.setState({
                checkCashBtn : false
          }) ;
    }
    render(){
        let userWallet = this.state.userWallet,
            showList = this.state.showBankCardList,
            checkCashBtn = this.state.checkCashBtn,
            list = [],
            item = {};
        userWallet.cardList && userWallet.cardList.map((obj,i)=>{
            if(!obj.isDef){
                list.push(
                    <li className={obj.isDef ? "active" : ""} key={i}  onClick={this.checkBankCard.bind(this,i)}>
                        <div>
                            <img src={obj.bankLogo} alt=""/>
                            <span>
                                <p>{obj.bankName}</p>
                                <span>{obj.bankNum}</span>
                            </span>
                        </div>
                    </li>
                )
            }else{
                item = obj
            }
        });

        return(
            <div className="myCash">
                <header>
                    <p>可提现余额</p>
                    <h3>￥{this.state.userWallet.change || 0}</h3>
                </header>
                <section>
                    <p>提现金额：</p>
                    <input type="text" ref="cashNum" placeholder="请输入提现金额" onChange={this.checkCashBtn.bind(this)}/>
                </section>
                <div className="myCashCard">
                    <div className="myCashCardItem" onClick={this.showBankCardList.bind(this)}>
                        <div>
                            <img src={item.bankLogo}/>
                            <span>
                                <p>{item.bankName}</p>
                                <span>{item.bankNum}</span>
                            </span>
                        </div>
                        <i className={`iconfont icon-qianjin-copy ${showList ? "active" : null}`} > </i>
                    </div>
                    <ul>
                        {showList ? list : null}
                    </ul>
                </div>
                <footer>
                    <Link to="/my/cashSuccess" className={`myCashBtn ${checkCashBtn ? "active" : null}`}>
                        <p>申请提现</p>
                    </Link>
                </footer>
                <SideNavBar/>
            </div>
        )
    }
}

ReactMixin.onClass(MyCash,Reflux.connect(Store))